<template>
    <div>
        <van-cell :title="alldata.stitle" />
        <div :id="'dataChart' + index" style="width: 100vw;height:50vh;"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import commonTitleMixin from '../mixins/commonTitleMixin'
export default {
    name: 'diamond',
    data: function () {
        return {
        }
    },
    props: ['alldata', 'index'],
    mixins: [commonTitleMixin],
    mounted () {
        // //console.log('everymonth', this.alldata)
        this.init()
    },
    methods: {
        init: function () {
            var myChart = echarts.init(document.getElementById('dataChart' + this.index))
            // 绘制图表
            myChart.setOption(
                {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true }
                    },
                    right: 10
                },
                legend: {
                    data: [this.alldata.snamearr[0], this.alldata.snamearr[1]],
                    left: 0
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: this.alldata.snamearr[0] + '(' + this.alldata.measurearr[0] + ')',
                        offset: 1,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                        minInterval: 1
                    },
                    {
                        type: 'value',
                        name: this.alldata.snamearr[1] + '(' + this.alldata.measurearr[1] + ')',
                        offset: -9,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                        minInterval: 1
                    }
                ],
                series: [
                    {
                        name: this.alldata.snamearr[0],
                        type: 'bar',
                        data: this.alldata.value0arr
                    },
                    {
                        name: this.alldata.snamearr[1],
                        type: 'line',
                        yAxisIndex: 1,
                        data: this.alldata.value1arr
                    }
                ]
            })
        }
    }
}
</script>
